<template>
    <div>
        <el-row>
            <!-- 模糊查询 -->
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="3"><el-input v-model="name" size="mini" placeholder="客户名字"></el-input></el-col>
            <el-col :span="3"><el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button></el-col>
            <!-- <el-col :span="3"
        ><el-button
          type="primary"
          size="mini"
          @click="addFormVisible = true"
          icon="el-icon-circle-plus"
          >添加</el-button
        ></el-col
      > -->
            <!-- <el-col :span="3"><a href="./public/modes/car_mode.xlsx" download="car_mode.xlsx">下载模板</a></el-col> -->
            <el-col :span="3"
                ><el-button type="primary" size="mini" @click="exportExcel" icon="el-icon-search">导出数据 </el-button></el-col
            >
            <el-col :span="3"><el-button type="primary" size="mini" @click="importExcel" icon="el-icon-search">导入数据</el-button></el-col>
            <el-col :span="3"><el-button type="primary" size="mini" @click="flush()" icon="el-icon-search">刷新</el-button></el-col>
        </el-row>
        <!-- 功能菜单 -->
        <el-row>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="username" label="用户名"> </el-table-column>
                <el-table-column prop="name" label="客户名字"> </el-table-column>
                <el-table-column prop="sex" label="性别"> </el-table-column>
                <el-table-column prop="phoneNum" label="电话"> </el-table-column>
                <el-table-column prop="email" label="邮箱"> </el-table-column>
                <el-table-column prop="address" label="地址"> </el-table-column>
                <el-table-column prop="status" :formatter="getStatusName" label="账号状态"> </el-table-column>
                <el-table-column label="操作" width="240px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <!-- 分页功能 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[1, 2, 3, 4, 5, 6, 100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-row>
        <!-- 导入数据 -->
        <el-row>
            <el-dialog title="导入数据" :visible.sync="dialogVisible" width="30%">
                <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="http://localhost:9999/ms/client/importExcel"
                    :file-list="fileList"
                    name="filename"
                    :on-success="uploadSuccess"
                    :auto-upload="false"
                >
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传</el-button>
                </el-upload>
            </el-dialog>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            Data: [],
            currentPage: 1,
            pageSize: 5,
            total: 100,
            name: '',
            dialogVisible: false,
            form: {},
            formLabelWidth: '120px',
            fileList: {}
        };
    },
    created: function () {
        this.load();
    },
    methods: {
        load() {
            var _this = this;
            //页面初始化时，加载的方法
            this.$http
                .get('http://localhost:9999/ms/client/queryAll', {
                    params: {
                        pageNo: this.currentPage,
                        pageSize: this.pageSize,
                        name: this.name
                    }
                })
                .then((response) => {
                    console.log(response.data);
                    _this.tableData = response.data.data.list;
                    _this.total = response.data.data.total;
                });
        },
        //每页显示数量发生变化
        handleSizeChange(val) {
            //console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            //console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.load();
        },
        //查询
        search() {
            this.load();
        },
        //导出
        exportExcel() {
            window.location.href = 'http://localhost:9999/ms/client/exportExcel';
        },
        importExcel() {
            this.dialogVisible = true;
        },
        //上传导入
        submitUpload() {
            this.$refs.upload.submit();
            this.dialogVisible = false;
        },
        uploadSuccess(){
            this.load()
        },
        //删除
        handleDelete: function (index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    console.log(row.id)
                    var _this = this;
                    this.$http
                        .delete('http://localhost:9999/ms/client/deleteClient?id=' + row.id)
                        .then(function (response) {
                            console.log(response);
                            if (response.status == 200) {
                                if (response.data.data) {
                                    //提示成功
                                    _this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    //重新加载数据
                                    _this.load();
                                }
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('你错了。。。');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        getStatusName(row, column, cellValue) {
            console.log('...22...' + row.status + ',' + JSON.stringify(column) + ',' + cellValue);
            return cellValue == 0 ? '启动' : '禁用';
        },
        flush() {
            //刷新当前页
            location.reload();
        }
    }
};
</script>
<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.el-upload{
    width: 80px;
    height: 38px;
}
</style>